<template>
    <div class="box">
        <div v-if="answerItem.questionType == 1" class="item">
            <div>
                <p>{{ index }}{{ getType(answerItem.questionType)}}</p>
                    <p class="question-item" v-html="answerItem.questionName"></p>
                    ({{answerItem.questionScore}} 分)              
            </div>
            <div>
                <el-radio-group v-model="answerItem.answer">
                    <p><el-radio label="A">A：<p class="answer-item" v-html="answerItem.answerA"></p></el-radio></p>
                    <p><el-radio label="B">B：<p class="answer-item" v-html="answerItem.answerB"></p></el-radio></p>
                    <p><el-radio label="C">C：<p class="answer-item" v-html="answerItem.answerC"></p></el-radio></p>
                    <p><el-radio label="D">D：<p class="answer-item" v-html="answerItem.answerD"></p></el-radio></p>
                </el-radio-group>
                <p class="p-item">
                    标准答案：{{ answerItem.correctAnswer }}
                </p>
                <p class="p-item">
                    得分：{{ answerItem.score }}
                </p>
            </div>
        </div>
        <div v-if="answerItem.questionType == 2" class="item">
            <div>
                <p>{{ index }}{{ getType(answerItem.questionType)}}</p>
                    <p class="question-item" v-html="answerItem.questionName"></p>
                    ({{answerItem.questionScore}} 分)              
            </div>
            <div>
                <el-checkbox-group v-model="getMutiList">
                    <p><el-checkbox label="A">A：<p class="answer-item" v-html="answerItem.answerA"></p></el-checkbox></p>
                    <p><el-checkbox label="B">B：<p class="answer-item" v-html="answerItem.answerB"></p></el-checkbox></p>
                    <p><el-checkbox label="C">C：<p class="answer-item" v-html="answerItem.answerC"></p></el-checkbox></p>
                    <p><el-checkbox label="D">D：<p class="answer-item" v-html="answerItem.answerD"></p></el-checkbox></p>
                </el-checkbox-group>
                <p class="p-item">
                    标准答案：{{ answerItem.correctAnswer }}
                </p>
                <p class="p-item">
                    得分：{{ answerItem.score }}
                </p>
            </div>
        </div>
        <div v-if="answerItem.questionType == 3" class="item">
            <div>
                <p>{{ index }}{{ getType(answerItem.questionType)}}</p>
                    <p class="question-item" v-html="answerItem.questionName"></p>
                    ({{answerItem.questionScore}} 分)              
                </div>
            <div>
                <el-radio-group v-model="answerItem.answer">
                    <p><el-radio  label="是">A：正确</el-radio></p>
                    <p><el-radio  label="否">B：错误</el-radio></p>
                </el-radio-group>
                <p class="p-item">
                    标准答案：{{ answerItem.correctAnswer =='是' ?'正确':'错误' }}
                </p>
                <p class="p-item">
                    得分：{{ answerItem.score }}
                </p>
            </div>
        </div>
        <div v-if="answerItem.questionType == 4" class="item">
            <div>
                <p>{{ index }}{{ getType(answerItem.questionType)}}</p>
                    <p class="question-item" v-html="answerItem.questionName"></p>
                    ({{answerItem.questionScore}} 分)            
                </div>
            <div>
                <div class="p-item">
                    您的答案<p class="answer-desc" v-html="answerItem.answer"></p>
                </div>
                <div class="p-item">
                    标准答案：<p class="answer-desc" v-html="answerItem.correctAnswer"></p>
                </div>
                <p class="p-item">
                    得分：<el-input-number v-model="answerItem.score" :min="0" :max="answerItem.questionScore"></el-input-number>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'QuestionView',
    props:{
        answerItem:{
            type:Object,
        },
        index:{
            type:String
        }
    },
    data(){
        return{
            questionEnum:[
                {key:1,value:"单选题"},
                {key:2,value:"多选题"},
                {key:3,value:"判断题"},
                {key:4,value:"简答题"}
            ],
        }
    },
    mounted(){
    },
    methods:{
        getType(val){
            let name = "";
            this.questionEnum.forEach(el=>{
                if(el.key == val){
                    name = el.value;
                    return;
                }
            })
            return name;
        },
    },
    computed:{
        getMutiList(){
            return this.answerItem.answer.split(',');
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .box{
        background: white;
        /* box-shadow: 3px 3px 6px  rgb(192, 188, 188); */
        /* border-radius:5px; */
    }
    .item{
        text-align: left;
        margin-left: 20px;
        padding-top: 20px;
    }
    /* p{
        padding:15px 15px;
    } */
    .tag-result{
        width: 50px;
        height: 25px;
        text-align: center;
        line-height: 24px;
    }
    .p-item{
        font-size: 14px;
        font-family: '楷体';
        padding-top: 0px;
    }
    .answer-desc{
        display: inline-block;
    }
    .question-item{
        display: inline-block;
    }
    .answer-item{
        display: inline-block;
    }
</style>